<!--
 * @Description:
 * @Author bianpengfei
 * @create 2021/12/24 14:29
-->
<!--setup-->
<script>
export default { name: 'ce-card-item' }
</script>
<script setup>
import { formatNum } from '/src/libs/utils/common'
import { computed, onMounted, onUnmounted, reactive } from 'vue'
import { Type } from '@bianpengfei/utils'

const props = defineProps({
  border: {
    type: Boolean,
    default: false
  },
  data: {
    type: Array,
    default: () => [
      { label: '住院收入', value: 0, unit: '元', onClick: () => {} },
      { label: '日同比；', value: 0, trend: '', unit: '' },
      { label: '科室排名；', value: 14 }
    ]
  }
})
defineEmits({})
const state = reactive({})
const titleC = computed(() => props.data[0] || {})
</script>

<!--render-->
<template>
  <div class="ce-card-item">
    <template v-if="data.length">
      <div
        @click="
          () => {
            titleC.onClick && titleC.onClick()
          }
        "
      >
        <div class="ce-card-item__label">{{ titleC.label }}</div>
        <div :class="['ce-card-item__rate', titleC.onClick && 'ce-card-item__rate-type']">
          <template v-if="Type.isNumber(+titleC.value) && !isNaN(+titleC.value)">
            <g-count-to :startVal="0" :endVal="titleC.value" :duration="3000" class="num"></g-count-to>
          </template>
          <span v-else class="num">{{ formatNum(+titleC.value || 0, 2) }} </span>
          <span>{{ titleC.unit }}</span>
        </div>
      </div>
      <template v-if="props.data.length > 1">
        <template v-for="(item, index) in props.data.slice(1)">
          <div v-if="item.value !== ''" class="ce-card-item__row" :key="index">
            <span>{{ item.label }}</span>
            <span :class="[item.trend == 'down' && 'font-green', item.trend == 'up' && 'font-red']">
              {{ item.value }}
              <i
                v-if="item.trend"
                class="fa"
                :class="[item.trend == 'down' && 'fa-arrow-up', item.trend == 'up' && 'fa-arrow-down']"
              ></i>
            </span>
            <span v-if="item.unit">{{ item.unit }}</span>
          </div>
          <div class="ce-card-item__row" v-else>&nbsp;</div>
        </template>
      </template>
      <div class="ce-card-item__divider" v-if="border"></div>
    </template>
  </div>
</template>

<!--style-->
<style scoped lang="less">
.ce-card-item__divider {
  position: absolute;
  width: 1px;
  height: 1rem;
  background: rgba(0, 0, 0, 0.1);
  right: 0;
  top: 50%;
  transform: translateY(-50%);
}
.ce-card-item {
  width: calc(100% / 3);
  flex: 1;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
  padding: 0 0.1rem;
  .ce-card-item__label {
    //font-weight: bold;
    //white-space: nowrap;
    text-align: center;
    font-size: 0.26rem;
    font-weight: bold;
  }
  .ce-card-item__rate {
    text-align: center;
    & > .num {
      color: #f9ab7c;
    }
    &.ce-card-item__rate-type {
      text-decoration: underline;
    }
  }
  .ce-card-item__row {
    white-space: nowrap;
    line-height: 0.4rem;
    .font-12;
    .font-subContent;
  }
  .font-12 {
    font-size: 0.24rem;
  }
  .font-subContent {
    color: #8c8c8c;
  }
  .font-green {
    color: #00e500;
  }
  .font-red {
    color: #ff2a00;
  }
}
</style>
